<template>
  <div class="container">
    <!-- 头部区 -->
    <MyHeader></MyHeader>

    <!--各个板块区域 -->
    <el-row class="box-card">
      <el-col :xs="18" :sm="12" :md="8" :lg="6"  v-for="item in PlateList" :key="item.index">
        <el-card :body-style="{ padding: '0px' }" shadow="always">
          <!-- 帖子展示图片 -->
          <el-image
            v-if="item.portrait"
            :src="item.portrait"
            :preview-src-list="[item.portrait]"
            class="image"
          >
            <el-skeleton slot="placeholder" style="width: 272px" animated>
              <template slot="template">
                <el-skeleton-item
                  variant="image"
                  style="width: 272px; height: 272px"
                />
              </template>
            </el-skeleton>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <!-- 神话人物名 -->
          <div class="username" v-if="item.name">
            <span>{{ item.name }}</span>
          </div>
          <div style="padding: 10px">
            <span @click="godetail(item.sid, item.pid)" v-if="item">{{
              item.intro | ellipsis
            }}</span>

            <div class="bottom clearfix">
              <!-- <span class="time" v-if="item">{{
                  new Date(item.post.registerTime).toLocaleString()
                }}</span> -->
              <el-button
                type="text"
                class="button"
                @click="godetail(item.sid, item.pid)"
                >more</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 返回按钮 -->
    <el-button
      type="primary"
      icon="el-icon-back"
      class="back"
      circle=""
      @click="logout"
    ></el-button>
  </div>
  <!-- </div> -->
</template>

<script>
import MyHeader from '@/components/MyHeader.vue';
import { getAllPost } from '@/api/services/backstage.services';
import { plate } from '@/api/services/article.services';
export default {
  name: 'page-plate',
  components: {
    MyHeader,
  },
  data() {
    return {
      imgurl: 'https://www.keaidian.com/uploads/allimg/190424/24110307_20.jpg',
      avatar:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F64%2F0d%2Fae%2F640dae9832158294570a6fc4febce63e_15.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651818323&t=711f5462d336b1a565fb704f5b073b55',
      PlateList: {
        sid: '',
      },
      lastSid: '',
      section: {},
      currentDate: [],
    };
  },
  filters: {
    ellipsis(value) {
      if (!value) return '';
      if (value.length > 13) {
        return value.slice(0, 13) + '...';
      }
      return value;
    },
  },
  mounted() {
    this.lastSid = this.$route.query.sid;
    console.log('123', this.lastSid);
    this.getPlateList(this.$route.query.sid);
  },
  methods: {
    logout() {
      this.$router.go(-1);
    },
    async getPlateList(sid) {
      this.PlateList.sid = sid;
      const data = await plate(sid, this.PlateList);
      console.log(data, 1);
      this.PlateList = data.data;
      this.section = data.section;
      console.log(data);
    },
    godetail(sid, pid) {
      this.$router.push(`detail?sid=${sid}&pid=${pid}`);
    },
  },
};
</script>

<style lang="less" scoped>
.plateAera {
  min-width: 1100px;
}
.plateAera h3 {
  text-indent: 2rem;
  color: #333;
}
.PlateHeader {
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
}
.PlateHeader p {
  position: relative;
  top: -8px;
  text-indent: 3rem;
}
.el-col-7 {
  width: 25%;
}
.box-card {
  padding: 0 50px;
  min-width: 300px;
}
.el-card {
  box-sizing: border-box;
  width: 272px;
  height: 400px;
  border-radius: 5px;
  margin: 70px auto 0;
  overflow: hidden;
  &:hover {
    box-shadow: 5px 12px 20px rgb(36 37 38 / 53%);
  }
  span {
    cursor: pointer;
  }
  /deep/.el-image__preview {
    cursor: url(),
      pointer;
  }
  .image-slot{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 272px; 
    height: 272px; 
    background: #f5f7fa;
    font-size: 30px;
    color: #909399
  }
}
.userInfo {
  width: 50px;
  height: 50px;
}
.userInfo img {
  width: 100%;
  height: 50px;
  border: 1px solid red;
  border-radius: 50%;
}
.username {
  text-align: center;
  line-height: 50px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  line-height: 8px;
}

.button {
  padding: 0;
  margin-top: 5px;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.back {
  position: absolute;
  bottom: 5%;
  left: 2%;
  z-index: 1;
}
</style>
